<template>
  <div>
    <apexchart
      type="bar"
      width="100%"
      height="500"
      :options="chartOptions"
      :series="chartSeries"
      @click="handleChartClick"
      :key="chartKey"
    ></apexchart>
  </div>
</template>
<script>
import ApexCharts from "apexcharts";
import VueApexCharts from "vue3-apexcharts";
export default {
  components: {
    apexchart: VueApexCharts,
  },
  props: {
    categories: {
      type: Array,
      default: [],
    },
    data: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      chartKey: 0,
      chartOptions: {
        chart: {
          id: "vue-bar-chart",
          type: "bar",
        },
        xaxis: {
          categories: this.categories,
        },
      },
      chartSeries: [
        {
          name: "工时",
          data: this.data,
        },
      ],
    };
  },
  watch: {
    categories: {
      handler(newVal) {
        this.chartOptions.xaxis.categories = newVal;
        this.chartKey++;
      },
      deep: true,
      immediate: true,
    },
    data: {
      handler(newVal) {
        this.chartSeries[0].data = newVal;
        this.chartKey++;
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    handleChartClick(event) {
      console.log("图表被点击，事件信息:", event);
      // 可以根据事件信息进行进一步的操作，如获取点击的数据点等
    },
  },
};
</script>
